<template>
    <div class="leftArea">
        <h2>{{title}}</h2>
        <ul class="ulOne">
            <li v-for="items,i of leftcontent" :key="i">
                <span class="li-one-text" @click="wardClick(i,items.children[0].index,items.children[0].name)">
                    {{items.name}}
                    <img v-if="n==i" class="ulOne-img" src="../../assets/img/index/downward.png" alt="">
                    <img v-else class="ulOne-img" src="../../assets/img/index/rightward.png" alt="">
                </span>
                <ul class="ulTwo" v-show="n==i">
                    <li v-for="item,j of items.children" :key="j"  >
                        <span v-if="item.children" class="li-two-text" @click="gotoClick(j,item.children[0].index,item.children[0].name)">
                            {{item.name}}
                            <span >
                                <img v-if="m==j" class="ulOne-img" src="../../assets/img/index/downward.png" alt="">
                                <img v-else class="ulOne-img" src="../../assets/img/index/rightward.png" alt="">
                            </span>
                        </span>
                        <span v-else class="li-two-text" @click="gotoClick(j,item.index,item.name)" :class="{active:m==j?true:false}">{{item.name}}</span>
                        <ul class="ulThree" v-show="m==j">
                            <li v-for="p,ind of item.children" :key="ind" @click="gotoTrClick(ind,p.index,p.name)">
                                <span class="li-three-text" :class="{active:l==ind?true:false}">{{p.name}}</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['leftcontent','title'],
    data(){
        return{
            n:-1,
            m:-1,
            l:-1,
        }
    },
    mounted(){
        this.gotoClick(0,'/index','实时概况')
    },
    methods:{
        // 侧边栏打开关闭
        wardClick(i,index,name){
            this.m=0
            this.l=0
            if(this.n==i){
                this.n=-1
            }else{
                this.n=i
            }
            this.$router.push(`${index}`)
            this.$emit("leftAreaSuccess", name);//调用父组件函数，并传值
        },
        // 点击侧边栏切换页面
        gotoClick(j,index,name){
            this.l=0
            if(this.m==j){
                this.m=-1
            }else{
                this.m=j
            }
            this.$router.push(`${index}`)
            this.$emit("leftAreaSuccess", name);//调用父组件函数，并传值
        },
        // 点击侧边栏切换页面-3级
        gotoTrClick(ind,index,name){
            this.l=ind
            this.$router.push(`${index}`)
            this.$emit("leftAreaSuccess", name);//调用父组件函数，并传值
        },
    },
    watch:{
        $route( to , from ){   
            // to , from 分别表示从哪跳转到哪，都是一个对象
            // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
        }
    }
}
</script>

<style scoped>
.leftArea{
    width: 204px;
    height:100vh;
    overflow: auto;
    color: #FFFFFF;
    font-family: Microsoft YaHei;
    padding: 25px 0;
    text-align: left;
    font-size: 16px;
}
.leftArea::-webkit-scrollbar {
    display: none;
}
h2{
    padding: 0px 20px;
    font-size: 32px;
    margin-bottom: 40px;
    font-weight: 600;
}
.ulOne>li>span{
    font-size: 19px;
    padding: 15px 20px;
    opacity: 0.9;
    display: flex;
    align-items: center;
}
.ulOne>li:first-child>span{
    opacity: 1;
}
.ulOne li:hover{
	cursor: pointer;
}
.ulOne-img{
    margin-left: 8px;
    width: 15px;
    height: 16px;
}
.li-one-text{
    display: flex;
    justify-content: space-between;
}
.li-two-text{
    padding: 0 20px 0 35px;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
}
.li-three-text{
    padding: 0 20px 0 50px;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    opacity: 0.58;
}
.ulTwo>li{
    opacity: 0.78;
    font-size: 16px;
    margin: 5px 0;
}
.ulTwo li>span:hover{
    background: rgba(228, 244, 255, 0.123);
    opacity: 1;
}
.ulTwo .active{
    background: rgba(228, 244, 255, 0.226)!important;
    opacity: 1;
}

</style>